import React ,{useMemo}from 'react'
import { Tabs,Button } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import styles from './css/home.module.css'
import { Radio, Space } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
function Home() {
    const nav=useNavigate()
    
    return (
        <div>
            <Tabs>
                <Tabs.Tab title='机票' key='fruits'>
                    菠萝
                </Tabs.Tab>
                <Tabs.Tab title='特价机票' key='vegetables'>
                    西红柿
                </Tabs.Tab>
                <Tabs.Tab title='火车票' key='hh'>
                    <Tabs>
                        <Tabs.Tab title='单程' key='pp'>
                            <div className={styles.box}>
                                <span>北京</span>
                                <LoopOutline />
                                <span>上海</span>
                            </div>
                            <div >
                                <span className={styles.date}>4月11日</span>
                                <span className={styles.day}>今天</span>
                            </div>
                            <div>
                                <span className={styles.dc}>
                                <Radio>只看高铁/动车</Radio>
                                </span>
                            </div>
                            <div>
                                <Button block color='primary' onClick={()=>nav('/ticket')}>搜索火车票</Button>
                            </div>
                        </Tabs.Tab>
                        <Tabs.Tab title='往返' key='wf'>
                            
                        </Tabs.Tab>
                        

                        
                    </Tabs>
                </Tabs.Tab>
                <Tabs.Tab title='汽车票' key='qq'>

                </Tabs.Tab>
                <Tabs.Tab title='接送/租车' key='ww'>

                </Tabs.Tab>
            </Tabs>
        </div>
    )
}

export default Home